<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			
			#outer {
				width: 500px;
				margin: 50px auto;
				padding: 10px;
				background-color: green;
				text-align: center;
			}
		</style>
		
		<script type="text/javascript">
			window.onload = function(){
//				点击按钮切换图片				
				
//				获取两个按钮
				var prev = document.getElementById("prev");
				var next = document.getElementById("next");

//				要切换图片就是要修改img标签的src属性
			
//				获取img标签
				var img = document.getElementsByTagName("img")[0];
//				alert(img);
				
//				创建一个数组,来保存图片的路径
				var imgArr = ["img/打针.jpg","img/男孩.jpg","img/女孩.jpg","img/猪.jpg","img/拽.jpg"];

				//创建一个变量，来保存当前正在显示的图片的索引
				var index = 0;
				
				//获取id为info的p元素
				var info = document.getElementById("info")
				//设置提示文字
				info.innerHTML = "一共"+ imgArr.length +"张图片，当前第"+(index+1)+"张";
				
//				分别为两个按钮绑定单击响应函数
				prev.onclick = function(){
					
//					切换上一张,索引自减
					index--;
					
					//判断index是否小于o
					if(index<0){
						index = imgArr.length-1;
						//设置提示文字
				info.innerHTML = "一共"+ imgArr.length +"张图片，当前第"+(index+1)+"张";
					}
					
//					alert("上一张");
					img.src = imgArr[index];
				}
				next.onclick = function(){
					
//					切换下一张,索引自增
					index++;
					
					//判断index是否大于4
					if(index > imgArr.length-1){
						index = 0;
					}
					//设置提示文字
				info.innerHTML = "一共"+ imgArr.length +"张图片，当前第"+(index+1)+"张";
//					alert("下一张");
					
					//切换图片就是修改img的src属性
					//要修改一个元素的属性	元素.属性 = 属性值
					img.src = imgArr[index];
				}
			}
		</script>
		
		
	</head>

	<body>
		<div id="outer">
			<p id="info"></p>
			
			<img src="img/女孩.jpg" alt="女孩" />

			<button id="prev">上一张</button>
			<button id="next">下一张</button>
		</div>
	</body>

</html>